<!--模板-->
<template>
  <div class="container">
    <div class="temp_banner">
      <div class="w_container">
        <h4>快速入门</h4>
        <p class="tt">完善的模板功能，多样化的技术运用，协助前端快速入门。</p>
      </div>
    </div>
    <div class="w_container temp_box">
      <div class="lt">
        <div class="tools_bar">

          <el-form :model="listQuery" :inline="true">
            <el-form-item label="关键字">
              <el-input size="mini" v-model="listQuery.keyword" placeholder="关键字查询" />
            </el-form-item>
            <el-form-item label="类别">
              <el-select size="mini" v-model="listQuery.type" placeholder="使用场景">
                <el-option label="全部" value=""></el-option>
                <el-option label="vue" value="1"></el-option>
                <el-option label="react" value="2"></el-option>
                <el-option label="jquery" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain size="mini">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="temp_item">
          <div class="infinite-list-wrapper" style="overflow:auto">
            <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
              <li v-for="i in count" class="list-item" :key="i">
                <Item />
              </li>
            </ul>
            <p class="tips" v-if="loading">加载中...</p>
            <p class="tips" v-if="noMore">我是有底线的</p>
          </div>
        </div>
      </div>
      <div class="rt">
        <div class="upload_cont">
          <PugTitle title="我要上传" />
          <el-upload class="upload" drag action="https://jsonplaceholder.typicode.com/posts/">
            <div class="el-upload__tip" slot="tip">
              只能上传zip文件，且不超过50M。<br />上传文件人工审核后展示。<br />*上传内容不得抄袭，违规，否则后果自行承担。
            </div>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </div>

        <div class="feedback_cont">
          <PugTitle title="我要反馈" />
          <div class="feedback">
            <span>微信</span>
            <div class="img_box">
              <img src="@/assets/image/govern.png" />
            </div>
            <span>邮箱</span>
            <div class="email_box">
              <p>tojustinzyh@163.com</p>
              <p>1476156127@qq.com</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Item from "./tempItem";
import PugTitle from "@/components/zTitle/pugIndex";

export default {
  components: {
    Item,
    PugTitle,
  },
  data() {
    return {
      listQuery: {
        keyword: "",
        type: "",
      },
      count: 10,
      loading: false,
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
  },
};
</script>
<style lang="scss" scoped>
.temp_banner {
  background-color: $primary_clr;
  padding: 15px;
  h4 {
    color: #dfe6ea;
    font-size: 20px;
    padding: 10px 15px;
  }
  .tt {
    font-size: 18px;
    color: #f1f1f1;
    line-height: 52px;
    padding: 0 15px;
  }
}
.temp_box {
  position: relative;
  .temp_item {
    background-color: #fff;
    .list {
      .list-item {
        width: 450px;
        display: inline-block;
        &:nth-child(odd) {
          padding: 0 6px 12px 0px;
        }
        &:nth-child(even) {
          padding: 0 0 12px 6px;
        }
      }
    }
    .tips {
      text-align: center;
      font-size: 14px;
      color: #666;
      margin-top: 15px;
    }
  }
  .lt {
    padding-right: 300px;
    padding-bottom: 50px;
  }
  .rt {
    width: 300px;
    position: absolute;
    right: 0;
    top: 0;
    padding-left: 12px;
    .upload_cont {
      background-color: #fff;
      .upload {
        padding: 10px 15px;
        /deep/ {
          .el-upload {
            width: 100%;
          }
          .el-upload-dragger {
            width: 100%;
          }
          .el-upload__tip {
            padding: 5px 15px;
            line-height: 22px;
          }
        }
      }
    }
    .feedback_cont {
      background-color: #fff;
      .feedback {
        padding: 12px 15px;
        span {
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 5px;
          color: #666;
        }
        .img_box {
          width: 200px;
          height: 200px;
          margin-bottom: 8px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .email_box {
          font-size: 14px;
          color: #454545;
          line-height: 26px;
        }
      }
    }
  }
  .tools_bar {
    background-color: #fff;
    height: 60px;
    margin: 12px 0 20px;
    padding: 8px 18px;
    text-align: right;
    .el-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
}
</style>